

/* 遍历主题map -> 获取HTML的data-theme值 */
@mixin themeify {

    /*
        知识点：
            @each 指令的格式: $var或 in <list 或 map>
                        // $var 可以是任何变量名。如 $length 或 $name，而 <list 或 map> 是一个列表或映射。
                        // @each 将变量 $var 作用于列表或映射中的每一个项目，然后输出结果。
            @each多重分配格式: @each $var1, $var2, $var3 ... in <list>
            @each多重分配与映射格式: @each $var1, $var2 in <map>
    */
    /* 此处为映射@each命令（key, value in $themes）：循环一个map，可添加样式到一个map中的每个键值对 */
    @each $theme-name,
    $theme-map in $themes {
        /* !global 把局部变量强升为全局变量 */
        $theme-map: $theme-map !global;

        /* 判断html的data-theme的属性值 */
        // 知识点：#{}是sass的插值表达式  & sass嵌套里的父容器标识    @content是混合器插槽，像vue的slot
        [data-theme="#{''+$theme-name}"] & {
            // 在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方
            @content;
        }

        .#{""+$theme-name} {
            @content;
        }
    }
}

/* 获取背景颜色 */
@mixin background_color($color) {
    @include themeify {
        background-color: themed($color) !important;
    }
}

/* 获取字体颜色 */
@mixin font_color($color) {
    @include themeify {
        color: themed($color) !important;
    }
}

/* 获取边框颜色 */
@mixin border_color($color) {
    @include themeify {
        border-color: themed($color) !important;
    }
}

/* 声明一个根据Key获取颜色的function */
@function themed($key) {
    @return map-get($theme-map, $key);
}

/* 获取主题列表样式 背景颜色 */
@mixin theme_background_color($color, $color2) {

    @include themeify2 {
        background-color: themed($color) !important;
    }

    @include themeify3 {
        background-color: themed($color2) !important;
    }
}

/* 获取主题列表样式 边框颜色 */
@mixin theme_border_color($color) {

    @include themeify2 {
        border-color: themed($color) !important;
    }
}

@mixin themeify2 {

    @each $theme-name,
    $theme-map in $themes {
        $theme-map: $theme-map !global;

        .#{""+$theme-name} {
            @content;
        }
    }
}

@mixin themeify3 {

    @each $theme-name,
    $theme-map in $themes {
        $theme-map: $theme-map !global;

        .#{""+$theme-name}:after {
            @content;
        }
    }
}

//设置CSS var值，因为我们需要将value转换为字符串
//例如:@include set-css-var-value(('color'， 'primary')， red);
// --el-color-primary:红色;
@mixin set-css-var-value($name, $color) {
    @include themeify {
        #{$name}: themed($color) !important;
    }
}

@mixin set-css-var-value2($name, $color) {
    @include themeify {
        #{$name}: $color !important;
    }
}